<!DOCTYPE html>
<html>
<head>
	
	<title><?php echo _MANAGER_TITLE_; ?></title>

	<?php $this->setFlag('list,vue,lazyload'); ?>
	<?php $this->import('meta'); ?>

	<link rel="stylesheet" type="text/css" href="html/manager/customer/css/contact.css?v=11" />

    <script type="text/javascript" src="html/manager/customer/js/contact.js?v=10"></script>

</head>
<body>

	<div id="mainBg" class="bg" style="display: none;">

		<input type="text" id="tempid" class="display-none" />
		<input type="text" id="flag" class="display-none" />

		<div class="title-bar">
            <div class="title">客服信息</div>
            <button type="button" class="layui-btn btnAdd" onclick="addContact()">添加新客服</button>
        </div>

        <div class="query-bar">
            <div class="search-left">
            	<select id="selectList1" class="ddlist" onchange="queryKey('ddl')">
                    <option value="" selected="selected">全部类型</option>
                    <option value="0">运营客服</option>
                    <option value="1">商务经理</option>
                    <option value="2">技术支持</option>
                </select>
                <select id="selectList2" class="ddlist" onchange="queryKey('ddl')">
                    <option value="" selected="selected">全部状态</option>
                    <option value="1">启用</option>
                    <option value="0">关闭</option>
                </select>
            </div>
            <div class="search-right">
                <input type="text" id="keyword1" class="keyword" placeholder="请输入客服姓名" autocomplete="off" />
                <button type="button" class="btnOk" onclick="queryKey('ok')">确定</button>
            </div>
        </div>

        <div class="tongji-bar">
            <span class="tongji">共<span id="listCount" class="tc1"></span>个客服</span>
        </div>

        <div id="listBar" class="table-bar">
        	<table class="table-box">
        		<tr class="tr-head">
                    <td class="td-head hw3">头像</td>
                    <td class="td-head">客服姓名 / 简介 / 联系方式</td>
                    <td class="td-head hw3">类型</td>
                    <td class="td-head hw1">顺序</td>
                    <td class="td-head hw3">状态</td>
                    <td class="td-head hw2">操作</td>
                </tr>
                <tr class="tr-item" v-for="info in list">
                    <td class="td-item-center hw3">
                        <img class="list-headpic" v-lazy="info.pic" />
                    </td>
                    <td class="td-item-left">
                    	<span class="tc4">姓名：</span>{{ info.name }}<br />
                    	<span class="tc4">电话：</span>{{ info.phone }}<br />
                        <span class="tc4">简介：</span>{{ info.introduce }}
                    </td>
                    <td class="td-item-center hw3">
                    	<template v-if="info.type == 0">
                    		运营客服
                    	</template>
                    	<template v-else-if="info.type == 1">
                    		商务经理
                    	</template>
                    	<template v-else-if="info.type == 2">
                    		技术支持
                    	</template>
                    	<template v-else>
				            类型有误
				        </template>
                    </td>
                    <td class="td-item-center hw1">{{ info.sx }}</td>
                    <td class="td-item-center hw3">
                    	<template v-if="info.isuse == 1">
                    		启用
                    	</template>
                    	<template v-else-if="info.isuse == 0">
				            <span class="tc1">关闭</span>
				        </template>
				        <template v-else>
				            状态有误
				        </template>
                    </td>
                    <td class="td-item-center hw2">
                        <span class="item-edit" v-on:click="editContact(info.kferid)">编辑</span>
                        <span class="item-delete" v-on:click="deleteContact(info.kferid, info.name)">删除</span>
                    </td>
                </tr>
        	</table>
        </div>

        <script type="text/javascript">
        	var contact = new Vue({
	            el: '#listBar',
	            data: {
	                list: ''
	            },
                mounted() {
                    Vue.use(VueLazyload);
                }
	        });

	        var files1 = '';
		    var files2 = '';
        </script>

        <div id="writeBar1" style="display: none;">
        	<div class="write-bar">
        		<div id="writeTitle1" class="write-title">添加新客服</div>
        		<div class="write-content">
        			<div class="write-tr1">
                        <div class="write-field1">姓名：</div>
                        <div class="write-value1">
                            <input type="text" id="name" class="write-input1" placeholder="请输入姓名" autocomplete="off" />
                        </div>
                    </div>
                    <div class="write-tr1">
                        <div class="write-field1">简介：</div>
                        <div class="write-value1">
                            <input type="text" id="introduce" class="write-input2" placeholder="请输入简介" autocomplete="off" />
                        </div>
                    </div>
                    <div class="write-tr1">
                        <div class="write-field1">手机/电话：</div>
                        <div class="write-value1">
                            <input type="text" id="phone" class="write-input1" placeholder="请输入联系电话" autocomplete="off" />
                        </div>
                    </div>
                    <div class="write-tr1">
                        <div class="write-field1">类型：</div>
                        <div class="write-value1">
                        	<select id="type" class="write-select2">
                                <option value="">请选择</option>
                                <option value="0">运营客服</option>
                                <option value="1">商务经理</option>
                                <option value="2">技术支持</option>
                            </select>
                        </div>
                    </div>
                    <div class="write-tr1">
                        <div class="write-field1">状态：</div>
                        <div class="write-value1">
                            <input type="radio" name="contactstatus" class="write-chenk1" checked="checked" value="1" />启用
                            <input type="radio" name="contactstatus" class="write-chenk2" value="0" />关闭
                        </div>
                    </div>
                    <div class="write-tr1">
                        <div class="write-field1">顺序：</div>
                        <div class="write-value1">
                            <input type="text" id="sx" class="write-input1" placeholder="请输入数字" autocomplete="off" onkeyup="validationNumber(this, 0)" />
                        </div>
                    </div>
                    <div class="write-tr2">
                        <div class="write-field2">头像：</div>
                        <div class="write-value2">
                            <div id="selectImg1" class="write-button2">选择图片</div><span class="imgSize">图片尺寸:200*200，不大于500k</span><br />
                            <img id="headpic" src="static/pic/pc/logo_default.jpg" class="write-img2" alt="" />
                        </div>
                    </div>
                    <div class="write-tr2">
                        <div class="write-field2">二维码：</div>
                        <div class="write-value2">
                            <div id="selectImg2" class="write-button2">选择图片</div><span class="imgSize">图片尺寸:200*200，不大于500k</span><br />
                            <img id="qrcodepic" src="static/pic/pc/logo_default.jpg" class="write-img2" alt="" />
                        </div>
                    </div>
        		</div>
        		<div class="write-button">
                    <div class="write-button-ok" onclick="saveContact()">确定</div>
                    <div class="write-button-cancel" onclick="closeWriteDiv()">取消</div>
                </div>
        	</div>
        </div>

	</div>

</body>
</html>